<template>
    <div class="hello">
      <!-- <div class="cover"></div> -->
      <div class="excel-btns">
  
<!--   
          <input style="font-size:16px;" type="file" @change="uploadExcel" />
  
          <span>载入本地表格: </span>
  
          <select v-model="selected" @change="selectExcel">
            <option disabled value="">选择</option>
            <option v-for="option in options" :key="option.text" :value="option.value">
              {{ option.text }}
            </option>
          </select> -->



         
          <!-- <button @click="getCurTable">获取当前表单</button> -->
          <!-- <el-button @click="refresh" style="margin-left: 1%;">刷新</el-button> -->
          <!-- <button @click="createTest">通过已有数据创建表单</button> -->
          <el-button type="text" style="color: black;margin-left: 35%;">{{ excel_name }}</el-button>
          
          <el-button @click="downloadPng" style="margin-left: 35%;">导出</el-button>
          <el-button @click="printPDF" style="margin-left: 1%;">打印</el-button>
          <el-button @click="back" style="margin-left: 1%;">返回</el-button>

      </div>
  
      <div
        id="luckysheet"
        style="margin:0px;padding:0px;position:absolute;width:100%;left: 0px;top: 5vh;bottom:0px;"
      ></div>
  
      <div v-show="isMaskShow" style="position: absolute;z-index: 1000000;left: 0px;top: 0px;bottom: 0px;right: 0px; background: rgba(255, 255, 255, 0.8); text-align: center;font-size: 40px;align-items:center;justify-content: center;display:flex;">Downloading</div>
      <img id="printJS-img" :src="src"  style="max-width: 100%;  max-height: 100%;" alt="">
    </div>
  </template>
  
  <script>
  import LuckyExcel from 'luckyexcel'
  import Print from 'print-js'
  import {showLoading,hideLoading} from '../components/loading.js'
  //导入库export.js 这个文件是es6的，不能在普通的HTML文件直接引入js文件（虽然都是js文件，但是有区别，具体请百度es6与es5）！需要把es6转es5才可以直接引入使用！
  import {testaaa,exportExcel} from '../components/export.js'
  export default {
    name: 'HelloWorld',
    props: {
      msg: String
    },
    data(){
      return {
        selected:"",
        cur_sheets:[],
        excel_name:"",
        author_name:"",
        author_id:"",
        user_name:"",
        isMaskShow: false,
        excel_id:"",
        user_id:"",
        src:""
      }
  
    },
    mounted() {
        
      this.excel_id=this.$route.query.excel_id;
      if(!this.excel_id){
          this.$router.push({path:'/login'})
        }else{
          this.getExcel(this.excel_id)
      }
    },
    methods:{
      createTable(){
        //luckysheet.refresh();
        // luckysheet.refresh(()=>{
        //   luckysheet.create(this.excel_options);
        // });
        // console.log(this.excel_options)
        luckysheet.create({
            container: 'luckysheet', // 设定DOM容器的id
            title:this.excel_name, // 设定表格名称
            data:[{ "name": "Sheet1", color: "", "status": "1", "order": "0", "data": [], "config": {}, "index":0 }, { "name": "Sheet2", color: "", "status": "0", "order": "1", "data": [], "config": {}, "index":1 }, { "name": "Sheet3", color: "", "status": "0", "order": "2", "data": [], "config": {}, "index":2 }],
            lang: 'zh', // 设定表格语言
            showinfobar:false
            // 更多其他设置...
        });
       // luckysheet.create(this.excel_options);
          //   $(function () {
          //   // luckysheet.create({
          //   //   container: "luckysheet",
          //   // });
          //   window.luckysheet.destroy();
          //   luckysheet.create(this.excel_options);
          // });
       
      },
      // 获取表格中包含内容的row，column
      getExcelRowColumn() {
          const sheetData = luckysheet.getSheetData();
          let objRowColumn = {
          row: [null, null], //行
          column: [null, null], //列
          };
          sheetData.forEach((item, index) => {
              //行数
            item.forEach((it, itemIndex) => {
              if (it !== null) {
                if (objRowColumn.row[0] == null) objRowColumn.row[0] = index; // row第一位
                  objRowColumn.row[1] = index; //row第二位
                    if (objRowColumn.column[0] == null)
                        objRowColumn.column[0] = itemIndex; //column第一位
                        objRowColumn.column[1] = itemIndex; //column第二位
                        }
                    });
                });
            return objRowColumn;
      },
      downloadPng(){
      let RowColumn = this.getExcelRowColumn();
        luckysheet.setRangeShow(RowColumn);
        let src = luckysheet.getScreenshot();//生成base64快照截图
        let filename=this.excel_name+".png"
        const elt = document.createElement('a');
        elt.setAttribute('href', src);
        elt.setAttribute('download', filename);
        elt.style.display = 'none';
        document.body.appendChild(elt);
        elt.click();
        document.body.removeChild(elt);
    },
    printPDF(){
        let RowColumn = this.getExcelRowColumn();
        luckysheet.setRangeShow(RowColumn);
        let src = luckysheet.getScreenshot();//生成base64快照截图
        this.src=src
        showLoading()
        setTimeout(()=>{
          printJS('printJS-img', 'html')
          hideLoading()
        },500)
        // Print({printable: src,
        // type: document.getType, // example(pdf,jpg,png)
        // base64: true,
        // showModal: true})
      },
      refresh(){
        luckysheet.refresh();
      },
      getExcel(){
        this.$ajax({
            method: 'post',
            url: '/get_excel__by_excel_id',
            data:{
              "excel_id":this.excel_id,
            }
        }).
        then(res => {    
            hideLoading()
            let sheets=res.data.content
            let name=res.data.excel_name
            let creator=res.data.author_name
            this.excel_name=name
            luckysheet.create({
                  container: 'luckysheet', //luckysheet is the container id
                  showinfobar:false,
                  data:sheets,
                  title:name,
                  userInfo:creator,
                  showtoolbar: false, // 是否显示工具栏
                    showinfobar: false, // 是否显示顶部信息栏
                    //   showsheetbar: false, // 是否显示底部sheet页按钮
                    showstatisticBar: false, // 是否显示底部计数栏
                    sheetBottomConfig: false, // sheet页下方的添加行按钮和回到顶部按钮配置
                    allowEdit: false, // 是否允许前台编辑
                    enableAddRow: false, // 允许增加行
                    enableAddCol: false, // 允许增加列
                    userInfo: false, // 右上角的用户信息展示样式
                    showRowBar: false, // 是否显示行号区域
                    showColumnBar: false, // 是否显示列号区域
                    sheetFormulaBar: false, // 是否显示公式栏
                    lang: 'zh', // 设定表格语言
              });
        }); 
      },
      getCurTable(){
        let sheets=luckysheet.getAllSheets();
        this.cur_sheets=sheets;
        console.log(this.cur_sheets);
      },
      createTableByData(sheets,name,creator){
        luckysheet.create({
                  container: 'luckysheet', //luckysheet is the container id
                  showinfobar:false,
                  data:sheets,
                  title:name,
                  userInfo:creator
              });
      },
      createTest(){
        console.log(this.cur_sheets);
        this.createTableByData(this.cur_sheets,"测试文档名","测试用户");
      },
      downloadExcel(){
        exportExcel(luckysheet.getAllSheets(),this.excel_name)
        // testaaa();
  
      },
      back(){
        this.$router.push({path:'/index/my_excels'})
      },
      update(){
        showLoading();
        this.$ajax({
            method: 'post',
            url: '/update_excel',
            data:{
              "excel_id":this.excel_id,
              "content":luckysheet.getAllSheets()
            }
        }).
        then(res => {    
            hideLoading()
            let status=res.data.status  
            if(status==2){
                this.$message({
                    message: '更新成功',
                    type: 'success'
                });
                this.$router.push({path:'/index/my_excels'})
            }
        }); 
      }
    }
  }
  </script>
  
  <!-- Add "scoped" attribute to limit CSS to this component only -->
  <style scoped>

  .excel-btns{
    margin-top: 2px;
    width: 100%;
    height: 5vh;
  }
  </style>
  